import React from 'react';
import anime from 'animejs';
import './addCoinAnimation.css';

class AddCoinAnimation extends React.Component {
    constructor (props) {
        super(props);

        this.state = {
        };

        this.storage = {
            ballList: [1, 2, 3, 4, 5]
        };
    }

    UNSAFE_componentWillReceiveProps (props) {
        if (props.startPosition && props.startPosition.left && requestAnimationFrame) {
            this.runAnimation(props.startPosition, props.endPosition);
        }

        return null;
    }

    componentDidMount () {
    }

    runAnimation (startPosition, endPosition) {
        const easing = 'linear';
        const isHalf = startPosition.left >= document.body.clientWidth / 2;
        const baseRootFontSize = 37.5;
        const currRootFontSize = parseFloat(document.documentElement.style.fontSize) || 37.5;
        const unit = currRootFontSize / baseRootFontSize;
        const isCarry = ('' + this.props.originalNum).length < ('' + (this.props.originalNum + this.props.addNum)).length;

        this.storage.ballList.forEach((item) => {
            anime({
                targets: `.addCoinAnimation .ball${item}`,
                opacity: [
                    {
                        value: 1, duration: 800, delay: 100, easing: easing
                    },
                    {
                        value: 0, duration: 80, delay: 500, easing: easing
                    }
                ],
                translateY: [
                    {
                        value: 80 * unit, duration: 400, easing: easing
                    },
                    {
                        value: endPosition.top - (15 * unit), duration: 600, easing: easing
                    }
                ],
                translateX: [
                    {
                        value: isHalf ? -(80 * unit) : (80 * unit), duration: 450, easing: easing
                    },
                    {
                        value: endPosition.left - (115 * unit), duration: 600, easing: easing
                    }
                ],
                delay: item * 80
            });
        });
        anime({
            targets: `.addCoinAnimation .addNum`,
            opacity: [
                {
                    value: 1, duration: 2000, delay: 600, easing: easing
                },
                {
                    value: 0, duration: 100, easing: easing
                }
            ],
            translateY: [
                {
                    value: 80 * unit, duration: 200, easing: easing
                },
                {
                    value: endPosition.top - (15 * unit), duration: 300, easing: easing
                }
            ],
            translateX: [
                {
                    value: isHalf ? -(80 * unit) : (80 * unit), duration: 250, easing: easing
                },
                {
                    value: endPosition.left + (isCarry ? (20 * unit) : 0) + (16 * unit), duration: 300, easing: easing
                }
            ],
            delay: 6 * 80
        });
    }

    render () {
        return (
            <div className="addCoinAnimation">
                {
                    this.storage.ballList.map((item) => {
                        return (
                            <div
                                key={item}
                                className={`ball ball${item}`}
                                style={{
                                    left: `${this.props.startPosition.left}px`,
                                    top: `${this.props.startPosition.top}px`
                                }}
                            ></div>
                        );
                    })
                }
                <strong
                    className="addNum"
                    style={{
                        left: `${this.props.startPosition.left}px`,
                        top: `${this.props.startPosition.top}px`
                    }}
                >{`+${this.props.addNum}`}</strong>
            </div>
        );
    }
}
export default AddCoinAnimation;
